<template>
    <view :style="{ '--color': color }">
        <view class="titleBox">{{ title }}</view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        props: ['title'],
        data() {
            return {};
        },
        methods: {},
        computed: {
            ...mapState(['color'])
        }
    };
</script>

<style lang="scss" scoped>
    .titleBox {
        padding-left: 20rpx;
        color: var(--color);
        font-size: 32rpx;
        position: relative;
    }

    .titleBox::before {
        content: '';
        width: 4rpx;
        height: 30rpx;
        background-color: var(--color);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
    }
</style>
